import { useEffect, useState } from 'react';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import PageHeader from '../components/PageHeader';
import { useDocumentTitle } from '../hooks/useDocumentTitle';
import { ChevronLeft, ChevronRight, XIcon, BookOpen } from 'lucide-react';
import { ImageWithLoading } from '../components/ImageWithLoading';
export const BuyingGuidesPage = () => {
  useDocumentTitle('Buying Guides');
  
  const [currentPage, setCurrentPage] = useState(1);
  const [selectedTopic, setSelectedTopic] = useState('');
  const itemsPerPage = 4;
  // Mock data for guides
  const allGuides = [{
    image: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    title: 'How to Choose the Best Heating Pad for Arthritis (2025 Guide)',
    excerpt: 'Find relief with our comprehensive guide to heating pads specifically designed for joint pain. Our 2025 update includes the newest technologies in heat therapy and smart temperature control systems.',
    category: 'Pain Management',
    date: 'Updated May 2025',
    link: '/buying-guides/heating-pad-arthritis',
    topics: ['Pain Relief']
  }, {
    image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    title: 'Complete Guide to Choosing a Blood Glucose Monitor (2025)',
    excerpt: 'Everything you need to know about selecting the right glucose monitor for your needs, including the latest 2025 models with smartphone integration and continuous monitoring capabilities.',
    category: 'Diabetes Care',
    date: 'Updated April 2025',
    link: '/buying-guides/blood-glucose-monitor',
    topics: ['Diabetes Management', 'Home Testing']
  }, {
    image: 'https://images.unsplash.com/photo-1584432810601-6c7f27d2362b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    title: "Choosing the Right Nebulizer for Home Use (2025 Buyer's Guide)",
    excerpt: 'Our comprehensive guide to selecting a nebulizer for respiratory conditions, featuring the latest 2025 models with improved medication delivery and quieter operation.',
    category: 'Respiratory Care',
    date: 'Updated March 2025',
    link: '/buying-guides/nebulizer-home-use',
    topics: ['Home Testing']
  }, {
    image: 'https://images.unsplash.com/photo-1595565312451-23051ab0666c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    title: 'The Complete Guide to Mobility Aids (2025)',
    excerpt: 'From walkers to wheelchairs, find the right mobility solution for your needs with our updated 2025 guide featuring the latest lightweight materials and ergonomic designs.',
    category: 'Mobility Assistance',
    date: 'Updated June 2025',
    link: '/buying-guides/mobility-aids',
    topics: ['Mobility']
  }, {
    image: 'https://images.unsplash.com/photo-1631815588090-d1bcbe9b4b38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    title: 'How to Choose the Best Blood Pressure Monitor (2025 Guide)',
    excerpt: 'A detailed guide to selecting the right blood pressure monitor for home use, with reviews of the latest 2025 models and features to consider.',
    category: 'Heart Health',
    date: 'Updated February 2025',
    link: '/buying-guides/blood-pressure-monitor',
    topics: ['Blood Pressure', 'Home Testing']
  }, {
    image: 'https://images.unsplash.com/photo-1585435557343-3b348031e799?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    title: 'Pulse Oximeters: A Complete Buying Guide (2025)',
    excerpt: 'Learn how to choose the right pulse oximeter for home monitoring, with detailed information on accuracy, features, and the best models of 2025.',
    category: 'Respiratory Care',
    date: 'Updated January 2025',
    link: '/buying-guides/pulse-oximeter',
    topics: ['Home Testing']
  }, {
    image: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    title: 'Choosing the Best TENS Unit for Pain Relief (2025)',
    excerpt: 'Our comprehensive guide to TENS units for pain management, featuring the latest technology advancements and recommended models for 2025.',
    category: 'Pain Management',
    date: 'Updated March 2025',
    link: '/buying-guides/tens-unit',
    topics: ['Pain Relief']
  }, {
    image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    title: "Continuous Glucose Monitoring Systems: 2025 Buyer's Guide",
    excerpt: 'Everything you need to know about selecting a continuous glucose monitoring system, with detailed comparisons of the latest 2025 models.',
    category: 'Diabetes Care',
    date: 'Updated May 2025',
    link: '/buying-guides/continuous-glucose-monitoring',
    topics: ['Diabetes Management', 'Home Testing']
  }, {
    image: 'https://images.unsplash.com/photo-1584432810601-6c7f27d2362b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    title: 'Choosing the Right CPAP Machine (2025 Guide)',
    excerpt: 'A detailed guide to selecting the best CPAP machine for sleep apnea, with information on features, comfort, and the top models of 2025.',
    category: 'Sleep Care',
    date: 'Updated April 2025',
    link: '/buying-guides/cpap-machine',
    topics: ['Sleep Apnea']
  }];
  // Filter guides by selected topic
  const filteredGuides = selectedTopic ? allGuides.filter(guide => guide.topics && guide.topics.includes(selectedTopic)) : allGuides;
  // Reset to first page when filter changes
  useEffect(() => {
    setCurrentPage(1);
  }, [selectedTopic]);
  // Calculate pagination
  const totalPages = Math.ceil(filteredGuides.length / itemsPerPage);
  const currentGuides = filteredGuides.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
  // Popular topics
  const topics = ['Blood Pressure', 'Diabetes Management', 'Sleep Apnea', 'Pain Relief', 'Mobility', 'First Aid', 'Home Testing'];
  // Handle topic selection
  const handleTopicClick = (topic: string) => {
    if (selectedTopic === topic) {
      setSelectedTopic(''); // Clear filter if already selected
    } else {
      setSelectedTopic(topic);
    }
  };
  return <div className="flex flex-col min-h-screen w-full bg-white">
      <Header />
      <main className="flex-grow">
        <PageHeader 
          title="Buying Guides"
          subtitle="Comprehensive resources to help you make informed decisions about healthcare products"
          icon={BookOpen}
        />
        <div className="py-16 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {/* Active filter indicator */}
            {selectedTopic && <div className="mb-6 flex items-center">
                <span className="text-sm text-gray-600">
                  Filtering by topic:
                </span>
                <span className="ml-2 inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-[#0e4c92] text-white">
                  {selectedTopic}
                  <button onClick={() => setSelectedTopic('')} className="ml-2 text-white focus:outline-none">
                    <XIcon className="h-4 w-4" />
                  </button>
                </span>
              </div>}

            {/* Guides grid */}
            <div className="grid gap-8 md:grid-cols-2">
              {currentGuides.length > 0 ? currentGuides.map((guide, index) => <a key={index} href={guide.link} className="flex flex-col md:flex-row overflow-hidden rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">
                    <div className="md:flex-shrink-0">
                      <ImageWithLoading src={guide.image} alt={guide.title} className="h-48 w-full md:w-48 object-cover" />
                    </div>
                    <div className="flex-1 bg-white p-6 flex flex-col justify-between">
                      <div className="flex-1">
                        <div className="flex justify-between items-center">
                          <p className="text-sm font-medium text-[#5cb8b2]">
                            {guide.category}
                          </p>
                          <p className="text-xs text-gray-500">{guide.date}</p>
                        </div>
                        <h3 className="mt-2 text-xl font-semibold text-[#0e4c92]">
                          {guide.title}
                        </h3>
                        <p className="mt-3 text-gray-600 line-clamp-2">
                          {guide.excerpt}
                        </p>
                      </div>
                      <div className="mt-6">
                        <span className="text-[#ff8c7a] font-medium">
                          Read Full Guide →
                        </span>
                      </div>
                    </div>
                  </a>) : <div className="col-span-2 text-center py-12">
                  <p className="text-lg text-gray-600">
                    No guides found for this topic.
                  </p>
                  <button onClick={() => setSelectedTopic('')} className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#0e4c92] hover:bg-[#0a3a70]">
                    Show all guides
                  </button>
                </div>}
            </div>

            {/* Pagination */}
            {currentGuides.length > 0 && <div className="mt-12 flex items-center justify-center">
                <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                  <button onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} disabled={currentPage === 1} className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50">
                    <span className="sr-only">Previous</span>
                    <ChevronLeft className="h-5 w-5" />
                  </button>
                  {Array.from({
                length: totalPages
              }).map((_, index) => {
                const pageNumber = index + 1;
                return <button key={pageNumber} onClick={() => setCurrentPage(pageNumber)} className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${currentPage === pageNumber ? 'z-10 bg-[#0e4c92] border-[#0e4c92] text-white' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'}`}>
                        {pageNumber}
                      </button>;
              })}
                  <button onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))} disabled={currentPage === totalPages} className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50">
                    <span className="sr-only">Next</span>
                    <ChevronRight className="h-5 w-5" />
                  </button>
                </nav>
              </div>}

            {/* Popular topics */}
            <div className="mt-12">
              <h2 className="text-2xl font-bold text-[#0e4c92]">
                Popular Topics
              </h2>
              <div className="mt-6 flex flex-wrap gap-4">
                {topics.map((topic, index) => <button key={index} onClick={() => handleTopicClick(topic)} className={`px-4 py-2 rounded-full transition-colors ${selectedTopic === topic ? 'bg-[#0e4c92] text-white' : 'bg-[#f5f7fa] text-[#0e4c92] hover:bg-[#e6f0f9]'}`}>
                    {topic}
                  </button>)}
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>;
};